<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>itRoom</title>
    <style>
      @font-face {
        font-family: Comfortaa;
        src: url(Comfortaa.ttf);
      }

      .show-content {
        opacity: 1;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Comfortaa';
        text-decoration: none;
        color: #ffffff;
      }

      body {
        max-width: 666px;
        background-color: #191919;
        opacity: 0;
        transition: opacity 1s;
      }

      header {
        position: fixed;
        display: flex;
        justify-content: space-between;
        background-color: #191919;
        height: 100px;
        width: 100vw;
        max-width: 666px;
        padding: 20px;
      }

      .join-btn {
        background: linear-gradient(
          to right,
          #c70bc5,
          #ff0066,
          #f65800,
          #ffed67,
          #3257ff,
          #3257ff,
          #ffed67,
          #f65800,
          #ff0066,
          #c70bc5
        );
        border: none;
        animation: rainbow_animation 4s ease-in-out infinite;
        background-size: 400% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        border-radius: 5px;
        font-weight: bolder;
        font-size: small;
        height: 54px;
      }

      .logo > img {
        width: 140px;
      }

      .logo > h6 {
        padding-top: 10px;
      }

      .main-menu {
        padding-top: 100px;
      }

      .main-menu > ul {
        list-style-type: none;
      }

      .main-menu > ul > li {
        padding: 12px 20px;
      }

      .main-menu > ul > li > a {
        text-decoration: none;
        color: #565553;
        font-size: 1.4em;
        font-weight: bolder;
      }

      .main-menu > ul > li > a:hover {
        color: #ffe058;
      }

      #tg > a:active {
        color: #0088cc;
      }

      #vk > a:active {
        color: #45668e;
      }

      #gis > a:active {
        color: #a3c626;
      }

      @keyframes rainbow_animation {
        0% {
          background-position: 0 0;
        }
        50% {
          background-position: 100% 0;
        }
        100% {
          background-position: 0 0;
        }
      }

      @media (min-width: 666px) {
        header {
          padding: 80px;
        }

        .main-menu {
          padding-top: 160px;
        }

        .main-menu > ul > li {
          padding: 12px 80px;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <div class="logo">
        <img src="./logo.png" alt="itRoom" />
        <h6>школа программирования</h6>
      </div>
      <a href="./join.html" class="join-btn">записаться</a>
    </header>
    <menu class="main-menu">
      <ul>
        <li><a href="./begin.html">Вводный курс 10+</a></li>
        <li><a href="./main.html">Основной курс 14+</a></li>
        <li><a href="">Блочное обучение 14+</a></li>
        <li><a href="">Подробнее о том, что мы изучаем</a></li>
        <li><a href="">Почему выбирают itRoom?</a></li>
        <li><a href="">Видеоотзывы от наших учеников</a></li>
        <li><a href="">Фотогалерея</a></li>
        <li id="vk"><a href="">Вконтакте</a></li>
        <li id="tg"><a href="">Телеграм</a></li>
        <li id="gis"><a href="">2ГИС</a></li>
      </ul>
    </menu>
    <script>
      window.addEventListener('load', () => {
        document.body.classList.add('show-content')
      })
    </script>
  </body>
</html>
